<template>
	<view class="audioview" @tap="openAudio">
		<text v-if="isme" style="text-align: end;max-width: 300rpx;margin-right: 5rpx;" :style="{width:30 + audiodata.duration * 5 + 'rpx'}">{{audiodata.duration + '"'}}</text>
		<cl-trumpet :isPlay="audioPlaying" :direction="isme?'left':'right'"></cl-trumpet>
		<text v-if="!isme" style="max-width: 300rpx;margin-left: 5rpx;" :style="{width: 30 + audiodata.duration * 5 + 'rpx'}">{{audiodata.duration + '"'}}</text>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import mediaCache from '@/common/mediacache/mediaCache.js'; // 适配你的实际路径
	export default {
		props: {
			audiodata: {
				type: Object,
				default () {
					return {}
				}
			},
			msg_id: {
				type: String,
				default: ''
			},
			isme: {
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				audioStatus:'loadding',//状态loadding,error,complete
				audioPlaying: false,
				innerAudioContext: null,
				fileTpye:'audio',
				uploadType:'chat'
			}
		},
		mounted() {
			// 注册全局事件
			this.audioOn(this.onPlayAudio)
			this.loadAudio();
		},
		// 组件销毁
		destroyed() {
			this.audioOff(this.onPlayAudio)
			// 销毁音频
			if (this.innerAudioContext) {
				this.innerAudioContext.destroy()
				this.innerAudioContext = null
			}
		},
		methods: {
			...mapActions(['audioOn', 'audioEmit', 'audioOff']),
			// 监听播放音频全局事件
			onPlayAudio(msg_id) {
				if (this.innerAudioContext) {
					if (this.msg_id != msg_id) {
						this.innerAudioContext.stop()
					}
				}
			},
			// 播放音频
			openAudio() {
				if(this.audioStatus == 'complete'){
					this.audioEmit(this.msg_id)
					if (this.audioPlaying) {
						this.innerAudioContext.stop()
					} else {
						console.log(this.innerAudioContext);
						this.innerAudioContext.play()
					}
				}else if(this.audioStatus == 'loadding'){
					uni.showToast({
						icon:'none',
						title:this.$t("loadding.title.audioInProcess")
					})
				}
			},
			async loadAudio() {
				this.audioStatus = 'loadding'//状态loadding,error,complete
				try {
					const cachedMedia = await mediaCache.loadMedia(this.audiodata.url, this.uploadType,this.fileTpye);
					this.setAudioSource(cachedMedia);
				} catch (error) {
				  console.log(error);
				  this.handleLoadError(error);
				}
			},
			setAudioSource(src) {
			  if (!this.innerAudioContext) {
				this.innerAudioContext = uni.createInnerAudioContext();
				// 监听播放
				this.innerAudioContext.onPlay(() => {
					this.audioPlaying = true
				})
				// 监听暂停
				this.innerAudioContext.onPause(() => {
					this.audioPlaying = false
				})
				// 监听停止
				this.innerAudioContext.onStop(() => {
					this.audioPlaying = false
				})
				this.innerAudioContext.onEnded(() => {
					this.audioPlaying = false
				})
				// 监听错误
				this.innerAudioContext.onError((e) => {
					uni.showToast({
						title: e.errMsg,
						icon: 'none'
					})
					this.audioPlaying = false
				})
			  }
			  this.innerAudioContext.src = src;
			  this.audioStatus = 'complete'//状态loadding,error,complete
			},
			handleLoadError(error) {
			  console.error('Audio loading error:', error);
			  this.audioStatus = 'error'//状态loadding,error,complete
			},
			isValidCache(url) {
			  // Implement your cache validation logic if needed
			  return true;
			},
		}
	}
</script>

<style scoped>
	.audioview {
		display: flex;
		align-items: center;
	}
</style>